<template>
    <el-container class="goods-edit">
      <el-header>
        <el-tabs class="sa-m-t-10" v-model="stepActive" @tab-click="isValidate">
            <el-tab-pane :name="0">
              <template #label>
                <div class="sa-flex" :class="validateData['0'] ? 'is-error' : ''">
                  基本信息
                  <el-icon v-if="validateData['0']" class="sa-m-l-5">
                    <warning-filled />
                  </el-icon>
                </div>
              </template>
            </el-tab-pane>
            <el-tab-pane :name="1">
              <template #label>
                <div class="sa-flex" :class="validateData['1'] ? 'is-error' : ''">
                  价格/库存
                  <el-icon v-if="validateData['1']" class="sa-m-l-5">
                    <warning-filled />
                  </el-icon>
                </div>
              </template>
            </el-tab-pane>
            <el-tab-pane :name="2">
              <template #label>
                <div class="sa-flex" :class="validateData['2'] ? 'is-error' : ''">
                  发货设置
                  <el-icon v-if="validateData['2']" class="sa-m-l-5">
                    <warning-filled />
                  </el-icon>
                </div>
              </template>
            </el-tab-pane>
            <!-- <el-tab-pane :name="3">
              <template #label>
                <div class="sa-flex" :class="validateData['3'] ? 'is-error' : ''">
                  商品参数
                  <el-icon v-if="validateData['3']" class="sa-m-l-5">
                    <warning-filled />
                  </el-icon>
                </div>
              </template>
            </el-tab-pane> -->
            <el-tab-pane :name="4">
              <template #label>
                <div class="sa-flex" :class="validateData['4'] ? 'is-error' : ''">
                  商品详情
                  <el-icon v-if="validateData['4']" class="sa-m-l-5">
                    <warning-filled />
                  </el-icon>
                </div>
              </template>
            </el-tab-pane>
            <!-- <el-tab-pane :name="5">
              <template #label>
                <div class="sa-flex" :class="validateData['5'] ? 'is-error' : ''">
                  带货配置
                  <el-icon v-if="validateData['5']" class="sa-m-l-5">
                    <warning-filled />
                  </el-icon>
                </div>
              </template>
            </el-tab-pane> -->
            <!-- <el-tab-pane :name="6" v-if="form.model.store_id ===null && isSelect==false ||props.modal.params.type=='add'  || props.modal.params.values=='supply'">
              <template #label>
                <div class="sa-flex" :class="validateData['6'] ? 'is-error' : ''">
                  供应链设置
                  <el-icon v-if="validateData['6']" class="sa-m-l-5">
                    <warning-filled />
                  </el-icon>
                </div>
              </template>
            </el-tab-pane> -->
          </el-tabs>
      </el-header>
      <el-main class="sa-p-t-10">
        <el-form :model="form.model" :rules="form.rules" ref="formRef0" label-width="100px">
          <div v-show="stepActive == 0">
            <div class="goodstype sa-flex sa-m-b-20" @click="goodsModality">
              <img class="goods-type"
                :class="form.model.type == 'normal' ? 'is-active' : ''" src="/static/images/shop/goods/entity.png"
                @click="onChangeGoodsType('normal')" />
            </div>
            <el-form-item label="商品标题" prop="subject">
              <el-input v-model="form.model.subject" placeholder="请输入标题"></el-input>
            </el-form-item>
            <el-form-item label="副标题" prop="subtitle">
              <el-input v-model="form.model.subtitle" placeholder="请输入副标题"></el-input>
            </el-form-item>
            <el-form-item label="商品主图" prop="image">
              <sa-uploader v-model="form.model.image.images[0]" fileType="image" @success="onSuccess"></sa-uploader>
              <div class="warning-title"> 作用于商城列表、分享图片；建议尺寸：750*750 px </div>
            </el-form-item>
            <el-form-item label="轮播图" prop="images">
              <sa-uploader v-model="form.model.image.images" :multiple="true" :fileType="['image','video']"></sa-uploader>
              <div class="warning-title sa-m-l-8">
                作用于商品详情顶部轮播显示，<br />轮播图可以拖拽调整顺序
              </div>
            </el-form-item>
            <el-form-item label="商品分类" prop="category_ids">
              <div class="sa-w-360">
                <el-popover popper-class="category-tooltip sa-popper" effect="light" placement="top-start" trigger="click">
                  <el-tabs v-model="tempCategory.tabActive">
                    <el-tab-pane v-for="tab in category.select" :key="tab" :label="tab.name" :name="tab.id + ''">
                      <el-cascader-panel v-model="tempCategory.idsArr[tab.id]" :ref="(el) => setCategoryRef(el, tab)"
                        :options="tab.children" :props="{
                          multiple: true,
                          checkStrictly: true,
                          value: 'id',
                          label: 'name',
                          children: 'children',
                          emitPath: false,
                        }" @change="onChangeCategoryIds"></el-cascader-panel>
                    </el-tab-pane>
                  </el-tabs>
                  <template #reference>
                    <div class="category-tag-wrap">
                      <el-tag v-for="(value, key) in tempCategory.label" :key="key" type="info" closable
                        @close.stop="onDeleteCategoryIds(key)">{{ value }}</el-tag>
                      <div class="category-tag-wrap-suffix"
                        :class="JSON.stringify(tempCategory.label) == '{}' ? '' : 'is-active'">
                        <el-icon class="arrow-down">
                          <arrow-down />
                        </el-icon>
                        <el-icon class="circle-close" @click.stop="onClearCategoryIds">
                          <circle-close />
                        </el-icon>
                      </div>
                    </div>
                  </template>
                </el-popover>
              </div>
              <!-- <el-button v-auth="'shop.admin.category.add'" class="sa-m-l-12" type="primary" link @click="onAddCategory">添加商品分类</el-button> -->
            </el-form-item>
            <!-- <el-form-item label="商品排序">
              <el-input v-model="form.model.weigh" placeholder="请输入商品排序" class="sa-w-160" type="number" :min="0"
                step-strictly></el-input>
            </el-form-item>
            <el-form-item label="限购类型">
              <el-radio-group v-model="form.model.limit_type">
                <el-radio label="none">不限购</el-radio>
                <el-radio label="daily">每日</el-radio>
                <el-radio label="all">累计</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="限购数量" v-if="form.model.limit_type != 'none'">
              <el-input v-model="form.model.limit_num" placeholder="请输入限购数量" class="sa-w-160" :min="0"
                type="number"></el-input>
            </el-form-item> -->
            <el-form-item label="商品状态" prop="status">
              <el-radio-group v-model="form.model.status">
                <el-radio label="up">上架</el-radio>
                <el-radio label="hidden">隐藏</el-radio>
                <el-radio label="down">下架</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </el-form>
        <el-form :model="form.model" :rules="form.rules" ref="formRef1" label-width="100px">
          <div v-show="stepActive == 1">
            <el-form-item label="商品规格">
              <el-radio-group v-model="form.model.is_sku" :disabled="props.modal.params.type == 'edit'">
                <el-radio :label="0">单规格</el-radio>
                <el-radio :label="1">多规格</el-radio>
              </el-radio-group>
              <div class="warning-title">
                如商品参与了拼团、秒杀、积分等活动，切换规格，可能导致活动规格不可用
              </div>
            </el-form-item>
            <el-form-item label="价格模板">
              <el-select class="sa-w-360" v-model="form.model.price_temp_id" placeholder="请选择价格模板（当前为自定义）" @change="tempchange" clearable>
                  <el-option v-for="item in pricetemp.select" :key="item.id" :label="item.title"
                    :value="item.id"></el-option>
                  </el-select>
            </el-form-item>
            <el-form-item label="售卖价格" prop="price">
              <el-input v-model="form.model.price" placeholder="请输入售卖价格" class="sa-w-160" type="number"
                :min="0" @input="form.model.price_temp_id = null">
                <template #append>元</template>
              </el-input>
            </el-form-item>
            <el-form-item label="划线价格" prop="original_price" v-if="form.model.is_sku !== 1">
              <el-input v-model="form.model.original_price" placeholder="请输入划线价格" class="sa-w-160" type="number"
                :step="0.01" :min="0" :precision="2" @input="form.model.price_temp_id = null">
                <template #append>元</template>
              </el-input>
            </el-form-item>
            <el-form-item label="商家采购价格">
              <el-input v-model="form.model.buy_price" placeholder="请输入商家采购价格" class="sa-w-160" type="number"
                :step="0.01" :min="0" :precision="2" @input="form.model.price_temp_id = null">
                <template #append>元</template>
              </el-input>
            </el-form-item>
            <el-form-item label="原价" prop="cost_price">
              <el-input v-model="form.model.cost_price" placeholder="请输入原价" class="sa-w-160" type="number"
                :step="0.01" :min="0" :precision="2" @input="form.model.price_temp_id = null">
                <template #append>元</template>
              </el-input>
            </el-form-item>
            



            <!-- <el-form-item label="库存类型">
              <el-radio-group v-model="form.model.stock_show_type">
                <el-radio label="exact">
                  <div class="sa-flex">
                    <div>精确显示</div>
                    <el-popover placement="right" title :width="244" trigger="hover">
                      <template #reference>
                        <div class="icon-warning">
                          <img src="/static/images/shop/category/warning.png" />
                        </div>
                      </template>
                      <div class="sale-hover-img">
                        <img src="/static/images/shop/goods/stock2.png" />
                      </div>
                    </el-popover>
                  </div>
                </el-radio>
                <el-radio label="sketchy">
                  <div class="sa-flex">
                    <div>粗略显示</div>
                    <el-popover placement="right" title :width="244" trigger="hover">
                      <template #reference>
                        <div class="icon-warning">
                          <img src="/static/images/shop/category/warning.png" />
                        </div>
                      </template>
                      <div class="sale-hover-img">
                        <img src="/static/images/shop/goods/stock1.png" />
                      </div>
                    </el-popover>
                  </div>
                </el-radio>
              </el-radio-group>
            </el-form-item> -->
            <!-- <el-form-item label="商品库存">
              <el-input v-model="form.model.stock" placeholder="请输入商品库存" class="sa-w-160" type="number" :step="1" :min="0"
                :disabled="props.modal.params.type == 'edit'">
                <template #append>件</template>
              </el-input>
            </el-form-item> -->
            <!-- <el-form-item label="销量类型">
            <el-radio-group v-model="form.model.sales_show_type">
              <el-radio label="exact">
                <div class="sa-flex">
                  <div>精确显示</div>
                  <el-popover placement="right" :width="244" trigger="hover">
                    <img class="exact" src="/static/images/shop/goods/sales2.png" />
                    <template #reference>
                      <div class="icon-warning">
                        <img src="/static/images/shop/category/warning.png" />
                      </div>
                    </template>
                  </el-popover>
                </div>
              </el-radio>
              <el-radio label="sketchy">
                <div class="sa-flex">
                  <div>粗略显示</div>
                  <el-popover placement="right" :width="244" trigger="hover">
                    <img class="sketchy" src="/static/images/shop/goods/sales1.png" />
                    <template #reference>
                      <div class="icon-warning">
                        <img src="/static/images/shop/category/warning.png" />
                      </div>
                    </template>
                  </el-popover>
                </div>
              </el-radio>
            </el-radio-group>
          </el-form-item> -->
            <template v-if="form.model.is_sku == 1">
              <!-- 操作 -->
              <div class="sku-wrap">
                <div class="sku" v-for="(s, k) in form.model.skus" :key="k">
                  <div class="sku-key sa-flex sa-row-between">
                    <div class="sa-flex">
                      <div class="sa-m-r-16">规格名称</div>
                      <el-input v-model="s.name" placeholder="请输入规格名称" class="sku-key-input"></el-input>
                    </div>
                    <el-icon @click="deleteMainSku(k)" class="sku-key-icon">
                      <CircleCloseFilled />
                    </el-icon>
                  </div>
                  <div class="sku-value sa-flex sa-flex-wrap">
                    <div class="sku-value-title sa-m-r-16 sa-m-b-16 sa-flex"> 规格值 </div>
                    <div v-for="(sc, c) in s.children" :key="c" class="sku-value-box sa-m-b-16">
                      <el-input v-model="sc.name" placeholder="请输入规格值" class="sku-value-input"></el-input>
                      <el-icon @click="deleteChildrenSku(k, c)" class="sku-value-icon">
                        <CircleCloseFilled />
                      </el-icon>
                    </div>
                    <div @click="addChildrenSku(k)" class="sku-value-add sa-m-r-24 sa-m-b-16 sa-flex cursor-pointer">
                      添加规格值
                    </div>
                  </div>
                </div>
                <div class="sku-tools sa-flex">
                  <el-button type="primary" class="add" @click="addMainSku">+ 添加规格</el-button>
                </div>
              </div>
              <!-- 表格 -->
              <div class="sku-table-wrap sa-m-b-20">
                <table class="sku-table" rules="all">
                  <thead>
                    <tr>
                      <template v-for="(item, i) in form.model.skus" :key="i">
                        <th v-if="item.children.length">{{ item.name }}</th>
                      </template>
                      <!-- <th>图片</th> -->
                      <th>
                        <div class="sa-flex">
                          <div class="th-title">价格(元)</div>
                          <el-popover placement="top" width="160" v-model:visible="allEditPopover.price" trigger="click">
                            <template #reference>
                              <el-icon class="batch-icon">
                                <Edit />
                              </el-icon>
                            </template>
                            <el-input v-model="allEditDatas" placeholder="请输入价格" size="small" class="alledit-input"
                              type="number" :step="0.01" :min="0" :precision="2"></el-input>
                            <div class="sa-flex sa-row-right">
                              <el-button class="is-link" size="small" type="primary"
                                @click="allEditData('price', 'cancel')">取消</el-button>
                              <el-button type="primary" size="small" @click="allEditData('price', 'define')">确定</el-button>
                            </div>
                          </el-popover>
                        </div>
                      </th>
                      <th>
                        <div class="sa-flex">
                          <div class="th-title">划线价格</div>
                          <el-popover placement="top" width="160" v-model:visible="allEditPopover.original_price"
                            trigger="click">
                            <template #reference>
                              <el-icon class="batch-icon">
                                <Edit />
                              </el-icon>
                            </template>
                            <el-input v-model="allEditDatas" placeholder="请输入划线价格" size="small" class="alledit-input"
                              type="number" :step="0.01" :min="0" :precision="2"></el-input>
                            <div class="sa-flex sa-row-right">
                              <el-button size="small" type="primary" class="is-link"
                                @click="allEditData('original_price', 'cancel')">取消</el-button>
                              <el-button type="primary" size="small"
                                @click="allEditData('original_price', 'define')">确定</el-button>
                            </div>
                          </el-popover>
                        </div>
                      </th>
                      <th>
                        <div class="sa-flex">
                          <div class="th-title">商家采购价格</div>
                          <el-popover placement="top" width="160" v-model:visible="allEditPopover.buy_price"
                            trigger="click">
                            <template #reference>
                              <el-icon class="batch-icon">
                                <Edit />
                              </el-icon>
                            </template>
                            <el-input v-model="allEditDatas" placeholder="请输入商家采购价格" size="small" class="alledit-input"
                              type="number" :step="0.01" :min="0" :precision="2"></el-input>
                            <div class="sa-flex sa-row-right">
                              <el-button size="small" type="primary" class="is-link"
                                @click="allEditData('buy_price', 'cancel')">取消</el-button>
                              <el-button type="primary" size="small"
                                @click="allEditData('buy_price', 'define')">确定</el-button>
                            </div>
                          </el-popover>
                        </div>
                      </th>
                      <th>
                        <div class="sa-flex">
                          <div class="th-title">成本价</div>
                          <el-popover placement="top" width="160" v-model:visible="allEditPopover.cost_price"
                            trigger="click">
                            <template #reference>
                              <el-icon class="batch-icon">
                                <Edit />
                              </el-icon>
                            </template>
                            <el-input v-model="allEditDatas" placeholder="请输入成本价" size="small" class="alledit-input"
                              type="number" :step="0.01" :min="0" :precision="2"></el-input>
                            <div class="sa-flex sa-row-right">
                              <el-button class="is-link" size="small" type="primary"
                                @click="allEditData('cost_price', 'cancel')">取消</el-button>
                              <el-button type="primary" size="small"
                                @click="allEditData('cost_price', 'define')">确定</el-button>
                            </div>
                          </el-popover>
                        </div>
                      </th>
                      <th>库存(件)</th>
                      <!-- <th>库存预警(件)</th> -->
                      <!-- <th>
                        <div class="sa-flex">
                          <div class="th-title">重量(kg)</div>
                          <el-popover placement="top" width="160" v-model:visible="allEditPopover.weight" trigger="click">
                            <template #reference>
                              <el-icon class="batch-icon">
                                <Edit />
                              </el-icon>
                            </template>
                            <el-input v-model="allEditDatas" placeholder="请输入重量" size="small" class="alledit-input"
                              type="number" :step="0.01" :min="0" :precision="2"></el-input>
                            <div class="sa-flex sa-row-right">
                              <el-button class="is-link" size="small" type="primary"
                                @click="allEditData('weight', 'cancel')">取消</el-button>
                              <el-button type="primary" size="small" @click="allEditData('weight', 'define')">确定</el-button>
                            </div>
                          </el-popover>
                        </div>
                      </th> -->
                      <!-- <th>
                        <div class="sa-flex">
                          <div class="th-title">规格编码</div>
                          <el-popover placement="top" width="160" v-model:visible="allEditPopover.sn" trigger="click">
                            <template #reference>
                              <el-icon class="batch-icon">
                                <Edit />
                              </el-icon>
                            </template>
                            <el-input v-model="allEditDatas" placeholder="请输入规格编码" size="small" class="alledit-input"
                              type="number"></el-input>
                            <div class="sa-flex sa-row-right">
                              <el-button class="is-link" size="small" type="primary"
                                @click="allEditData('sn', 'cancel')">取消</el-button>
                              <el-button type="primary" size="small" @click="allEditData('sn', 'define')">确定</el-button>
                            </div>
                          </el-popover>
                        </div>
                      </th> -->
                      <!-- <th>商品状态</th> -->
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(item, i) in form.model.sku_prices" :key="i">
                      <template v-for="(v, j) in item.goods_sku_text" :key="j">
                        <td>
                          <span class="th-center">{{ v }}</span>
                        </td>
                      </template>
                      <!-- <td class="image">
                        <sa-uploader v-model="item.image" fileType="image" size="28"></sa-uploader>
                      </td> -->
                      <td>
                        <el-input v-model="item.price" placeholder="请输入价格" size="small" type="number" :step="0.01" :min="0"
                          :precision="2" @input="form.model.price_temp_id = null"></el-input>
                      </td>
                      <td>
                        <el-input v-model="item.original_price" placeholder="请输入划线价格" size="small" type="number"
                          :step="0.01" :min="0" :precision="2" @input="form.model.price_temp_id = null"></el-input>
                      </td>
                      <td>
                        <el-input v-model="item.buy_price" placeholder="请输入商家采购价格" size="small" type="number"
                          :step="0.01" :min="0" :precision="2" @input="form.model.price_temp_id = null"></el-input>
                      </td>
                      <td>
                        <el-input v-model="item.cost_price" placeholder="请输入成本价" size="small" type="number" :step="0.01"
                          :min="0" :precision="2" @input="form.model.price_temp_id = null"></el-input>
                      </td>
                      <td class="stock">
                        <el-input v-model="item.stock" placeholder="请输入库存" size="small"
                          v-if="props.modal.params.type == 'add'" type="number" :step="1" :min="0"></el-input>
                        <span v-if="props.modal.params.type == 'edit'">
                          {{ item.stock }}
                        </span>
                      </td>
                      <!-- <td class="stock_warning">
                        <div class="sa-flex">
                          <el-switch v-model="item.stock_warning_switch" @change="changeStockWarningSwitch(i)"
                            class="sku-stock-switch" />
                          <span v-if="!item.stock_warning_switch">使用默认库存预警</span>
                          <el-input v-model="item.stock_warning" placeholder="请输入" size="small"
                            v-if="item.stock_warning_switch" type="number" :step="1" :min="0"></el-input>
                        </div>
                      </td> -->
                      <!-- <td>
                        <el-input v-model="item.weight" placeholder="请输入" size="small" type="number" :step="0.01" :min="0"
                          :precision="2"></el-input>
                      </td> -->
                      <!-- <td class="sn">
                        <el-input v-model="item.sn" placeholder="请输入" size="small"></el-input>
                      </td> -->
                      <!-- <td>
                        <el-select v-model="item.status" placeholder="请选择" size="small">
                          <el-option label="上架" value="up"></el-option>
                          <el-option label="下架" value="down"></el-option>
                        </el-select>
                      </td> -->
                    </tr>
                  </tbody>
                </table>
              </div>
            </template>
            <!-- <div v-if="form.model.is_sku == 0">
              <el-form-item label="售卖价格" prop="price">
                <el-input v-model="form.model.price" placeholder="请输入售卖价格" class="sa-w-160" type="number"
                  :min="0">
                  <template #append>元</template>
                </el-input>
              </el-form-item>
              <el-form-item label="划线价格">
                <el-input v-model="form.model.original_price" placeholder="请输入划线价格" class="sa-w-160" type="number"
                  :step="0.01" :min="0" :precision="2">
                  <template #append>元</template>
                </el-input>
              </el-form-item>
              <el-form-item label="成本价格">
                <el-input v-model="form.model.cost_price" placeholder="请输入成本价格" class="sa-w-160" type="number" :step="0.01"
                  :min="0" :precision="2">
                  <template #append>元</template>
                </el-input>
              </el-form-item>
              <el-form-item label="库存类型">
                <el-radio-group v-model="form.model.stock_show_type">
                  <el-radio label="exact">
                    <div class="sa-flex">
                      <div>精确显示</div>
                      <el-popover placement="right" title :width="244" trigger="hover">
                        <template #reference>
                          <div class="icon-warning">
                            <img src="/static/images/shop/category/warning.png" />
                          </div>
                        </template>
                        <div class="sale-hover-img">
                          <img src="/static/images/shop/goods/stock2.png" />
                        </div>
                      </el-popover>
                    </div>
                  </el-radio>
                  <el-radio label="sketchy">
                    <div class="sa-flex">
                      <div>粗略显示</div>
                      <el-popover placement="right" title :width="244" trigger="hover">
                        <template #reference>
                          <div class="icon-warning">
                            <img src="/static/images/shop/category/warning.png" />
                          </div>
                        </template>
                        <div class="sale-hover-img">
                          <img src="/static/images/shop/goods/stock1.png" />
                        </div>
                      </el-popover>
                    </div>
                  </el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="商品库存">
                <el-input v-model="form.model.stock" placeholder="请输入商品库存" class="sa-w-160" type="number" :step="1" :min="0"
                  :disabled="props.modal.params.type == 'edit'">
                  <template #append>件</template>
                </el-input>
              </el-form-item>
              <el-form-item label="库存预警">
                <el-switch v-model="stockWarning" />
                <div class="warning-title"> 库存预警在未开启的状态下，使用默认库存预警 </div>
              </el-form-item>
              <el-form-item v-if="stockWarning" label="预警数量">
                <el-input v-model="form.model.stock_warning" placeholder="请输入库存预警数量" class="sa-w-160">
                  <template #append>件</template>
                </el-input>
              </el-form-item>
            </div> -->
            <!-- <el-form-item label="销量类型">
              <el-radio-group v-model="form.model.sales_show_type">
                <el-radio label="exact">
                  <div class="sa-flex">
                    <div>精确显示</div>
                    <el-popover placement="right" :width="244" trigger="hover">
                      <img class="exact" src="/static/images/shop/goods/sales2.png" />
                      <template #reference>
                        <div class="icon-warning">
                          <img src="/static/images/shop/category/warning.png" />
                        </div>
                      </template>
                    </el-popover>
                  </div>
                </el-radio>
                <el-radio label="sketchy">
                  <div class="sa-flex">
                    <div>粗略显示</div>
                    <el-popover placement="right" :width="244" trigger="hover">
                      <img class="sketchy" src="/static/images/shop/goods/sales1.png" />
                      <template #reference>
                        <div class="icon-warning">
                          <img src="/static/images/shop/category/warning.png" />
                        </div>
                      </template>
                    </el-popover>
                  </div>
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="虚拟销量">
              <div class="sa-form-wrap">
                <el-input class="sa-w-360" v-model="form.model.show_sales" placeholder="请输入虚拟销量" type="number" :min="0">
                </el-input>
                <div class="warning"> 可以提高商品的销量排行榜，鼓励用户下单 </div>
              </div>
            </el-form-item> -->
            <!-- <div v-if="form.model.is_sku == 0">
              <el-form-item label="商品重量">
                <el-input v-model="form.model.weight" placeholder="请输入商品重量" class="sa-w-160" type="number" :step="0.01"
                  :min="0" :precision="2">
                  <template #append>kg</template>
                </el-input>
              </el-form-item>
              <el-form-item label="商品编号">
                <el-input v-model="form.model.sn" placeholder="请输入商品编号" class="sa-w-160"></el-input>
              </el-form-item>
            </div> -->
          </div>
        </el-form>
        <el-form :model="form.model" :rules="form.rules" ref="formRef2" label-width="100px">
          <div v-show="stepActive == 2">
            <template v-if="form.model.type == 'normal'">
              <el-form-item label="配送方式">
                <el-radio-group v-model="form.model.dispatch_type">
                  <el-radio label="express">物流快递</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item v-if="form.model.dispatch_type" label="物流快递" prop="dispatch_id">
                  <el-select class="sa-w-360" v-model="form.model.dispatch_id" placeholder="请选择物流快递">
                    <el-option v-for="item in dispatch.select" :key="item.id" :label="item.name"
                      :value="item.id"></el-option>
                  </el-select>
                  <!-- <el-button v-auth="'shop.admin.dispatch.dispatch.add'" class="sa-m-l-12" type="primary" link @click="onAddDispatch('express')">
                    添加物流快递
                  </el-button> -->
              </el-form-item>
              <!-- <el-form-item label="货到付款">
                <el-switch v-model="form.model.is_offline" :active-value="1" :inactive-value="0"></el-switch>
              </el-form-item> -->
            </template>
            <template v-if="form.model.type == 'virtual'">
              <el-form-item label="配送方式">
                <el-radio-group v-model="form.model.dispatch_type" @change="onChangeDispatchType">
                  <el-radio label="autosend">自动发货</el-radio>
                  <el-radio label="custom">手动发货
                    <el-popover popper-class="sa-popper" trigger="hover">
                      在订单管理，手动对订单进行发货，发货时填写自定义发货内容
                      <template #reference>
                        <el-icon class="warning">
                          <warning />
                        </el-icon>
                      </template>
                    </el-popover>
                  </el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item v-if="form.model.dispatch_type == 'autosend'" label="自动发货" prop="dispatch_id">
                  <el-select class="sa-w-360" v-model="form.model.dispatch_id" placeholder="请选择自动发货">
                    <el-option v-for="item in dispatch.select" :key="item.id" :label="item.name"
                      :value="item.id"></el-option>
                  </el-select>
                  <el-button v-auth="'shop.admin.dispatch.dispatch.add'" class="sa-m-l-12" type="primary" link @click="onAddDispatch('autosend')">
                    添加自动发货
                  </el-button>
              </el-form-item>
            </template>
          </div>
        </el-form>
        <el-form :model="form.model" :rules="form.rules" ref="formRef3" label-width="100px">
          <div v-show="stepActive == 3">
            <!-- <el-form-item label="服务保障" prop="service_ids" class="server">
              <el-select v-model="form.model.service_ids" placeholder="请选择服务保障" multiple>
                <el-option v-for="item in service.select" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
              
              <el-button v-auth="'shop.admin.goods.service.add'" class="sa-m-l-12" type="primary" link
                @click="createService">
                添加标签
              </el-button>
            </el-form-item> -->
            <!-- <el-form-item label="活动标签" prop="activity_tag_ids" class="server">
              <el-select v-model="form.model.activity_tag_ids" placeholder="请选择活动标签，最多添加两个" multiple  multiple-limit="2">
                <el-option v-for="item in tags.select" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
              <el-button v-auth="'shop.admin.goods.service.add'" class="sa-m-l-12" type="primary" link
                @click="createTags">
                添加活动标签
              </el-button>
            </el-form-item> -->
            <!-- <el-form-item label="参数详情">
              <div class="sa-template-wrap">
                <div class="title sa-flex">
                  <div class="key">参数名称</div>
                  <div class="value">内容</div>
                  <div class="oper">操作</div>
                </div>
                <sa-draggable v-model="form.model.params" :animation="300" handle=".sortable-drag" item-key="element">
                  <template #item="{ element, index }">
                    <div class="item">
                      <el-form-item class="key" :prop="'params.' + index + '.title'" :rules="templateRules.title">
                        <el-input placeholder="请输入名称" v-model="element.title"></el-input>
                      </el-form-item>
                      <el-form-item class="value" :prop="'params.' + index + '.content'" :rules="templateRules.content">
                        <el-input placeholder="请输入标识" v-model="element.content"></el-input>
                      </el-form-item>
                      <el-form-item class="oper">
                        <el-button @click="deleteTemplate(index)" type="danger" class="is-link" plain>删除</el-button>
                        <sa-svg class="sa-m-l-8 sortable-drag" name="sa-round"></sa-svg>
                      </el-form-item>
                    </div>
                  </template>
                </sa-draggable>
                <el-button @click="addTemplate()" class="sa-m-l-16" type="primary" plain icon="Plus">添加</el-button>
              </div>
            </el-form-item> -->
          </div>
        </el-form>
        <el-form :model="form.model" :rules="form.rules" ref="formRef4" label-width="100px">
          <div v-show="stepActive == 4">
            <el-form-item label="图文详情">
              <div>
                <sa-editor v-model:content="form.model.content"></sa-editor>
              </div>
            </el-form-item>
          </div>
        </el-form>
        <el-form :model="form.model" :rules="form.rules" ref="formRef5" label-width="100px">
          <div v-show="stepActive == 5">
            <el-form-item label="社群带货">
              <el-switch v-model="form.model.sync_sns" :active-value="1" :inactive-value="0" />
              <div class="warning-title"> {{ form.model.sync_sns ? '是' : '否' }} </div>
            </el-form-item>
            <el-form-item label="社群分佣比例" v-if="form.model.sync_sns">
              <el-input v-model="form.model.commission_money_rate" placeholder="请输入社群分佣比例" class="sa-w-160" type="number"
                :step="0.01" :min="0" :precision="2">
                <template #append>%</template>
              </el-input>
            </el-form-item>
          </div>
        </el-form>
        <el-form :model="form.model" :rules="form.rules" ref="formRef5" label-width="100px">
          <div v-show="stepActive == 6">
            <el-form-item label="是否加入供应链">
              <el-switch v-model="form.model.is_selected" :active-value="1" :inactive-value="0" />
              <div class="warning-title"> {{ form.model.is_selected ? '是' : '否' }} </div>
            </el-form-item>
            <el-form-item label="分佣比例" v-if="form.model.is_selected==1">
              <el-input v-model="form.model.commission_money_rate" placeholder="请输入分佣比例" class="sa-w-300" type="number"
                :step="0.01" :min="0" :precision="2">
                <template #append>%</template>
              </el-input>
            </el-form-item>
          </div>
        </el-form>
      </el-main>
      <el-footer class="sa-footer--submit">
        <el-button v-if="props.modal.params.type == 'add' || props.modal.params.type == 'copy'"
          v-auth="'shop.admin.goods.goods.add'" v-throttle type="primary" @click="confirm">保存</el-button>
        <el-button v-if="props.modal.params.type == 'edit'" v-auth="'shop.admin.goods.goods.edit'" v-throttle type="primary"
          @click="confirm" v-loading="btnloading">更新并同步数据</el-button>
      </el-footer>
    </el-container>
  </template>
  <script setup>
  import { onMounted, reactive, ref, unref, watch, nextTick, getCurrentInstance } from 'vue';
  import { api } from '../goods.service';
  import { api as categoryApi } from '@/app/shop/admin/category/category.service';
  import { api as dispatchApi } from '@/app/shop/admin/dispatch/dispatch.service';
  import { isArray, isEmpty, cloneDeep, round } from 'lodash';
  import SaEditor from '@/sheep/components/sa-editor/sa-editor.vue';
  import SaDraggable from 'vuedraggable';
  import { useModal } from '@/sheep/hooks';
  import { ElMessage } from 'element-plus';
//   import CategoryEdit from '../../category/edit.vue';
//   import DispatchEdit from '../../dispatch/edit.vue';
//   import ServiceEdit from '../service/edit.vue';
//   import tagsEdit from '../activityTag/edit.vue';
  import { checkAuth } from '@/sheep/directives/auth';
  
  const { proxy } = getCurrentInstance();
  
  const emit = defineEmits(['modalCallBack']);
  const props = defineProps({
    modal: {
      type: Object,
    },
  });
  
  const tagWrapper = ref(null);
  const tagInput = ref(null);
  const updateStyle = () => {
    const inputInner = tagInput.value?.input;
    const tagWrapperEl = tagWrapper.value;
    if (tagWrapperEl) {
      const inputInitialHeight = 32;
      const { offsetHeight } = tagWrapperEl;
      const height = !isEmpty(tempCategory.label)
        ? `${Math.max(offsetHeight + 6, inputInitialHeight)}px`
        : `${inputInitialHeight}px`;
      inputInner.style.height = height;
      updatePopperPosition();
    }
  };
  const tooltipRef = ref();
  const updatePopperPosition = () => {
    nextTick(() => {
      tooltipRef.value?.updatePopper();
    });
  };
  
  // 添加 编辑 form
  let formRef = ref(null);
  const stockWarning = ref(false);
  
  const form = reactive({
    model: {
      type: 'normal', // 商品类型
      title: '',
      subtitle: '',
      category_ids: '',
      category_ids_arr: [],
      image: {
        images:[]
      },
      images: [],
      params: [],
      content: '',
      original_price: 0,
      price: '',
      cost_price: '',
      is_sku: 0,
      limit_type: 'none',
      limit_num: 0,
      likes: '',
      views: 0,
      sales: '',
      stock: '',
      sync_sns: 0,
      sns_commission_rate: '',
      commission_money_rate:"",
      commission_money:"",
      stock_warning: '',
      stock_warning_switch: false,
      sales_show_type: 'exact',
      stock_show_type: 'exact',
      show_sales: 0,
      service_ids: [],
      activity_tag_ids:[],
      dispatch_type: 'express',
      dispatch_id: '',
      is_offline: 0,
      status: 'up',
      weigh: 0,
      weight: '',
      skus: [
        {
          id: 0,
          name: '',
          temp_id: 0,
          pid: 0,
        //   weigh: 0,
          children: [
            {
              id: 0,
              name: '',
              temp_id: 0,
              pid: 0,
            //   weigh: 0,
            },
          ],
        },
      ],
      sku_prices: [],
    },
    rules: {
      subject: [{ required: true, message: '请输入标题', trigger: 'blur' }],
      // category_ids: [{ required: true, message: '请选择商品分类', trigger: 'change' }],
      status: [{ required: true, message: '请选择商品状态', trigger: 'blur' }],
      price: [{ required: true, message: '请输入售卖价格', trigger: 'blur' }],
      cost_price: [{ required: true, message: '请输入原价', trigger: 'blur' }],
      dispatch_id: [{ required: true, message: '请选择发货模板', trigger: 'blur' }],
    //   image: [{ required: true, message: '请选择商品主图', trigger: 'blur' }],
    //   images: [{ required: true, message: '请选择轮播图', trigger: 'blur' }],
    //   title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
    //   category_ids: [{ required: true, message: '请输入商品分类', trigger: 'blur' }],
    //   price: [{ required: true, message: '请输入售卖价格', trigger: 'blur' }],
    //   dispatch_id: [{ required: true, message: '请选择发货模板', trigger: 'blur' }],
    },
  });
  const loading = ref(false);
  const btnloading = ref(false);
  //步骤条
  const stepActive = ref(0);
  const goback = () => {
    stepActive.value--;
    nextTick(() => updateStyle());
  };
  const next = () => {
    unref(formRef).validate((valid) => {
      if (valid) {
        stepActive.value++;
      } else {
        return false;
      }
    });
  };
  const validateData = ref({
    0: 0,
    1: 0,
    2: 0,
    3: 0,
    4: 0,
    5: 0,
  })
  function isValidate() {
    nextTick(async () => {
      for (var key in validateData.value) {
        await proxy.$refs[`formRef${key}`].validate((valid) => {
          if (valid) {
            validateData.value[key] = 0;
          } else {
            validateData.value[key] = 1;
          }
        });
      }
    })
  }
  
  //商品形式
  const goodsModality = () => {
    let modality = true;
  };
  const isSelect=ref(false)
  // 获取详情
  async function getDetail(id) {
    
    loading.value = true;
      const res = await api.shopaddgoodsdetail({offerIds:'[' + props.modal.params.id + ']'});
      let data = res.result.result[0].productInfo
      form.model = data;
      




      if(props.modal.params.status && props.modal.params.good_id){
      const re = await api.goods.detail(props.modal.params.good_id);
      const data1 = re.data
      const error = re.error
      console.log(data1, 'data1=============');
      if (error === 0) {
        // form.model = data;
        if(form.model.is_selected==0){
          isSelect.value=false
        }
        else{
          isSelect.value=true
        }
        form.model.params = isArray(form.model.params) ? form.model.params : [];
        form.model.image = {
          images:data1.images
        }
        form.model.subject = data1.title
        form.model.price_temp_id = data1.price_temp_id
        form.model.buy_price = data1.buy_price
        form.model.type = 'normal'
      form.model.dispatch_type = 'express'
      form.model.status = props.modal.params.status
      form.model.price = props.modal.params.sjprice
      form.model.content = form.model.description
      form.model.original_price = data1.original_price
      form.model.cost_price = data1.cost_price
        form.model.subtitle = data1.subtitle
        form.model.category_ids_arr = data1.category_ids_arr
        form.model.category_ids = data1.category_ids
        form.model.content = data1.content
        form.model.dispatch_id = data1.dispatch_id
        form.model.skus = data1.skus
        form.model.sku_prices = data1.sku_prices
        form.model.is_sku = data1.is_sku
        form.model.service_ids = data1.service_ids
        form.model.params = data1.params
        // form.model.price = Number(data1.price)


        form.model.sku_prices = isArray(form.model.sku_prices) ? form.model.sku_prices : [];
        // form.model.price = Number(data.price);
        if (form.model.dispatch_id) {
          dispatchCheck.value = true;
        }
        tempCategory.idsArr = {}
    // return
    if(form.model.category_ids_arr){
      form.model.category_ids_arr.forEach(item => {
        if (tempCategory.idsArr[item[0]]) {
          tempCategory.idsArr[item[0]].push(item.pop())
        } else {
          tempCategory.idsArr[item[0]] = []
          tempCategory.idsArr[item[0]].push(item.pop())
        }
      })
    }
        const newlist = form.model.category_ids.split(',');
        if(newlist.length){
          newlist.forEach(item=>{
            for (var key in categoryRef) {
              let keyArr = key.split('-');
              if(categoryRef[key].menus.length){
                categoryRef[key].menus[0].forEach((itm,idx)=>{
                  if(Number(itm.value) === Number(item)){
                    tempCategory.label[itm.value] = keyArr[1] + '/' + itm.pathLabels.join('/');
                    console.log('tempCategory.label',tempCategory.label)
                  }
                })
              }
            }
          })
        }
        // if(form.model.category_ids_arr.length){
        //   form.model.category_ids_arr.forEach((item,index)=>{
        //     if(item.length){
        //       item.forEach((itm,idx)=>{
        //         if(idx !== 0){
        //           for (var key in categoryRef) {
        //             let keyArr = key.split('-');
        //             if(keyArr[0] === itm){
        //               if(categoryRef[key].menus.length){
        //                 categoryRef[key].menus.forEach((it,ix)=>{
        //                   if(it.pathValues[0] === itm[2]){
        //                     categoryRef[key].checkedNodes.push(it)
        //                     console.log('卧槽加上了',categoryRef[key])
        //                   }
        //                 })
        //               }
                      
        //             }
        //           }
        //         }
        //       })
        //     }
        //   })
        // }
        

        // 商品分类
        // initCategoryIds()

        if (form.model.is_sku == 0) {
          if (form.model.stock_warning > 0) {
            stockWarning.value = true
          }
        }

        if (form.model.is_sku == 1) {
          getInit();
        }
      }
      return
    }







      let newimg = []
      if(form.model.image.images.length){
        form.model.image.images.forEach((item,index)=>{
            if(item.indexOf('https://') === -1){
                item = 'https://cbu01.alicdn.com/' + item
            }
            newimg.push(item)
        })
      }
      form.model.image.images = newimg
      if(form.model.skuInfos){
        if(form.model.skuInfos.length > 1){
          form.model.is_sku = 1
        }else{
          form.model.is_sku = 0
        }
      }else{
        form.model.is_sku = 0
      }
      form.model.type = 'normal'
      form.model.dispatch_type = 'express'
      form.model.status = props.modal.params.status
      form.model.price = props.modal.params.sjprice
      form.model.content = form.model.description
      form.model.cost_price = props.modal.params.price / 100
      
    //   form.model.attributes = [];
      form.model.sku_prices = [];
      form.model.skus = []
    //   form.model.price = Number(data.price);
      initCategoryIds()

      getInit();

      console.log('form.model',form.model)
      return
      form.model.skus = [
        {
          id: 0,
          name: '',
          temp_id: 0,
          pid: 0,
        //   weigh: 0,
          children: [
            {
              id: 0,
              name: '',
              temp_id: 0,
              pid: 0,
            //   weigh: 0,
            },
          ],
        },
      ]
  }
  
  let categoryRef = {};
  const setCategoryRef = (el, tab) => {
    if (el) {
      categoryRef[tab.id + '-' + tab.name] = el;
    }
  };
  const tempCategory = reactive({
    tabActive: '',
    idsArr: {},
    label: {}
  })
  function initCategoryIds() {
      tempCategory.idsArr = {}
    // return
    if(form.model.category_ids_arr){
      form.model.category_ids_arr.forEach(item => {
        if (tempCategory.idsArr[item[0]]) {
          tempCategory.idsArr[item[0]].push(item.pop())
        } else {
          tempCategory.idsArr[item[0]] = []
          tempCategory.idsArr[item[0]].push(item.pop())
        }
      })
    }
    onChangeCategoryIds()
    
  }
  function onChangeCategoryIds() {
    nextTick(() => {
      tempCategory.label = {}
      for (var key in categoryRef) {
        let keyArr = key.split('-');
        if (categoryRef[key].checkedNodes.length > 0) {
          console.log('categoryRef[key]',categoryRef[key] )
          categoryRef[key].checkedNodes.forEach((row) => {
            tempCategory.label[row.value] = keyArr[1] + '/' + row.pathLabels.join('/');
          });
        }
      }
    })
  }
  function onDeleteCategoryIds(id) {
    delete tempCategory.label[id];
    let idx = -1
    for (var key in tempCategory.idsArr) {
      tempCategory.idsArr[key].forEach((item, index) => {
        if (item == id) {
          idx = index
        }
      })
      if (idx != -1) {
        tempCategory.idsArr[key].splice(idx, 1)
        idx = -1
      }
    }
  }
  function onClearCategoryIds() {
    tempCategory.idsArr = {}
    tempCategory.label = {}
  }
  const category = reactive({
    select: [],
  });
  async function getCategorySelect() {
    ({ data: category.select } = await categoryApi.select());
    tempCategory.tabActive = category.select.length ? category.select[0].id + '' : ''
  }
  //新建分类
  function onAddCategory() {
    // useModal(
    //   CategoryEdit,
    //   { title: '新建', type: 'add' },
    //   {
    //     confirm: () => {
    //       getCategorySelect();
    //     },
    //   },
    // );
  }
  
  const isEditInit = ref(false);
  function getInit() {
    let tempIdArr = {};
    if(form.model?.skuInfos?.length > 10){
      form.model.skuInfos = form.model.skuInfos.slice(0, 10)
    }
    for (let i in form.model.skus) {
      // 为每个 规格增加当前页面自增计数器，比较唯一用
      form.model.skus[i]['temp_id'] = countId.value++;
      for (let j in form.model.skus[i]['children']) {
        // 为每个 规格项增加当前页面自增计数器，比较唯一用
        form.model.skus[i]['children'][j]['temp_id'] = countId.value++;
        // 记录规格项真实 id 对应的 临时 id
        tempIdArr[form.model.skus[i]['children'][j]['id']] =
          form.model.skus[i]['children'][j]['temp_id'];
      }
    }
    if(props.modal.params.status && props.modal.params.good_id){
      for (var i = 0; i < form.model.sku_prices.length; i++) {
        let tempSkuPrice = form.model.sku_prices[i];
        tempSkuPrice['temp_id'] = i + 1;
        // 将真实 id 数组，循环，找到对应的临时 id 组合成数组
        tempSkuPrice['goods_sku_temp_ids'] = [];
        let goods_sku_id_arr = tempSkuPrice['goods_sku_ids'].split(',');
        for (let ids of goods_sku_id_arr) {
          tempSkuPrice['goods_sku_temp_ids'].push(tempIdArr[ids]);
        }
        form.model.sku_prices[i] = tempSkuPrice;
      }
    }else{
    for (var i = 0; i < form.model?.skuInfos?.length; i++) {
        let tempSkuPrice = form.model.skuInfos[i];
        if(!form.model.skus.length){
            tempSkuPrice.attributes.forEach(item=>{
                form.model.skus.push(
                    {
                        id: 0,
                        name: item.attributeName,
                        temp_id: countId.value++,
                        pid: 0,
                        children: [],
                        // children: [
                        //     {
                        //     id: 0,
                        //     name: '',
                        //     temp_id: 0,
                        //     pid: 0,
                        //     },
                        // ],
                    },
                )
            })
        }
        let goods_sku_id_arr = []
        // form.model.skus[i]['temp_id'] = countId.value++;
        for(var j = 0;j < tempSkuPrice.attributes.length;j++){
            let child = {
                    id: 0,
                    name: '',
                    temp_id: 0,
                    pid: 0,
            }
            child.temp_id = countId.value++
            goods_sku_id_arr.push(child.temp_id)
            child.name = tempSkuPrice.attributes[j].attributeValue
            form.model.skus[j].children.push(child)
        }
    //   for (let j in form.model.skus[i]['attributes']) {
    //     // 为每个 规格项增加当前页面自增计数器，比较唯一用
    //     form.model.skus[i]['children'][j]['temp_id'] = countId.value++;
    //     // 记录规格项真实 id 对应的 临时 id
    //     tempIdArr[form.model.skus[i]['children'][j]['id']] =
    //       form.model.skus[i]['children'][j]['temp_id'];
    //   }
    //   let tempSkuPrice = {};
      
      tempSkuPrice['temp_id'] = i + 1;
      tempSkuPrice['id'] = i;
      tempSkuPrice['goods_sku_ids'] = 0;
      tempSkuPrice['goods_id'] = 0;
      // 将真实 id 数组，循环，找到对应的临时 id 组合成数组
      tempSkuPrice['goods_sku_temp_ids'] = [];
    //   let goods_sku_id_arr = []
      tempSkuPrice.goods_sku_text = []
      if(props.modal.params.status && props.modal.params.good_id){
        
      }else{
        // console.log('tempSkuPrice.price',tempSkuPrice)
        tempSkuPrice.price = ''
      }
      
      // tempSkuPrice.price = tempSkuPrice.consignPrice
      if(props.modal.params.status && props.modal.params.good_id){
        tempSkuPrice.original_price = tempSkuPrice.consignPrice
      }else{
        tempSkuPrice.original_price = ''
      }
      
      // 
      tempSkuPrice.cost_price = tempSkuPrice.consignPrice
      tempSkuPrice.stock = tempSkuPrice.amountOnSale
      tempSkuPrice.goods_sku_temp_ids = goods_sku_id_arr
      tempSkuPrice.image = '0'
      tempSkuPrice.status = 'up'
      tempSkuPrice.weigh = '0'
      tempSkuPrice.weight = '1'
      tempSkuPrice.stock_warning = ''
      tempSkuPrice.sn = tempSkuPrice.specId
    //   tempSkuPrice.goods_sku_temp_ids = goods_sku_id_arr
    // let goods_sku_id_arr = tempSkuPrice['goods_sku_ids'].split(',');
      tempSkuPrice.supplier_sku_goods_id = tempSkuPrice.specId
      tempSkuPrice.attributes.forEach((item,index)=>{
        // goods_sku_id_arr.push(item.attributeID)
        tempSkuPrice.goods_sku_text.push(item.attributeValue)
      })
      
    //   for (let ids of goods_sku_id_arr) {
    //     tempSkuPrice['goods_sku_temp_ids'].push(tempIdArr[ids]);
    //   }
      form.model.sku_prices[i] = tempSkuPrice;
    }
  }
    // if (props.modal.params.type == 'copy') {
    //   for (let i in form.model.skus) {
    //     // 为每个 规格增加当前页面自增计数器，比较唯一用
    //     form.model.skus[i].id = 0;
    //     for (let j in form.model.skus[i]['children']) {
    //       form.model.skus[i]['children'][j].id = 0;
    //     }
    //   }
    // }
    console.log('form.model.sku_prices',form.model.sku_prices)
    if (form.model.sku_prices.length > 0) {
      let cost_price = 99999999
      form.model.sku_prices.forEach((si,idx) => {
        if(Number(si.cost_price) < Number(cost_price)){
            console.log('cost_price',cost_price)
            console.log('si.cost_price',si.cost_price)
            cost_price = si.cost_price
          }
        // if(idx === 0){
        //   cost_price = si.cost_price
        //   console.log('idx',idx)
        //   console.log('123si.cost_price',si.cost_price)
        // }else{
          
        // }
        si.stock_warning_switch = false;
        if (si.stock_warning || si.stock_warning == 0) {
          si.stock_warning_switch = true;
        }
      });
      form.model.cost_price = cost_price
    }
    // form.model.sku_prices = form.model.sku_prices.slice(0, 10)
    loading.value = false;
    console.log('form.modelform.modelform.model',form.model)
    setTimeout(() => {
      isEditInit.value = true;
    }, 200);
  }
  //添加主规格
  const skuModal = ref('');
  const countId = ref(1);
  function addMainSku() {
    form.model.skus.push({
      id: 0,
      temp_id: countId.value++,
      name: skuModal.value,
      pid: 0,
      children: [],
    });
    skuModal.value = '';
    buildSkuPriceTable();
  }
  function deleteMainSku(k) {
    let data = form.model.skus[k];
  
    // 删除主规格
    form.model.skus.splice(k, 1);
  
    // 如果当前删除的主规格存在子规格，则清空 skuPrice， 不存在子规格则不清空
    if (data.children.length > 0) {
      form.model.sku_prices = []; // 规格大变化，清空skuPrice
      isResetSku.value = 1; // 重置规格
    }
    buildSkuPriceTable();
  }
  //添加子规格
  const isResetSku = ref(0);
  const childrenModal = [];
  function addChildrenSku(k) {
    let isExist = false;
    form.model.skus[k].children.forEach((e) => {
      if (e.name == childrenModal[k] && e.name != '') {
        isExist = true;
      }
    });
    if (isExist) {
      alert('子规格已存在');
      return false;
    }
  
    form.model.skus[k].children.push({
      id: 0,
      temp_id: countId.value++,
      name: childrenModal[k],
      pid: form.model.skus[k].id,
    });
    childrenModal[k] = '';
  
    // 如果是添加的第一个子规格，清空 skuPrice
    if (form.model.skus[k].children.length == 1) {
      form.model.sku_prices = []; // 规格大变化，清空skuPrice
      isResetSku.value = 1; // 重置规格
    }
    buildSkuPriceTable();
  }
  function deleteChildrenSku(k, i) {
    let data = form.model.skus[k].children[i];
    form.model.skus[k].children.splice(i, 1);
  
    // 查询 skuPrice 中包含被删除的的子规格的项，然后移除
    let deleteArr = [];
    form.model.sku_prices.forEach((item, index) => {
      item.goods_sku_text.forEach((e, i) => {
        if (e == data.name) {
          deleteArr.push(index);
        }
      });
    });
    deleteArr.sort(function (a, b) {
      return b - a;
    });
    // 移除有相关子规格的项
    deleteArr.forEach((i, e) => {
      form.model.sku_prices.splice(i, 1);
    });
  
    // 当前规格项，所有子规格都被删除，清空 skuPrice
    if (form.model.skus[k].children.length <= 0) {
      form.model.sku_prices = []; // 规格大变化，清空skuPrice
      isResetSku.value = 1; // 重置规格
    }
    buildSkuPriceTable();
  }
  watch(
    () => form.model.skus,
    () => {
      if (isEditInit.value && form.model.is_sku) {
        buildSkuPriceTable();
      }
    },
    { deep: true },
  );
  //组成新的规格
  function buildSkuPriceTable() {
    let arr = [];
    //遍历sku子规格生成新数组，然后执行递归笛卡尔积
    form.model.skus.forEach((s1, k1) => {
      let children = s1.children;
      let childrenIdArray = [];
      if (children.length > 0) {
        children.forEach((s2, k2) => {
          childrenIdArray.push(s2.temp_id);
        });
        // 如果 children 子规格数量为 0,则不渲染当前规格, （相当于没有这个主规格）
        arr.push(childrenIdArray);
      }
    });
    recursionSku(arr, 0, []);
  }
  //递归找笛卡尔规格集合
  function recursionSku(arr, k, temp) {
    if (k == arr.length && k != 0) {
      let tempDetail = [];
      let tempDetailIds = [];
      temp.forEach((item, index) => {
        for (let sku of form.model.skus) {
          for (let child of sku.children) {
            if (item == child.temp_id) {
              tempDetail.push(child.name);
              tempDetailIds.push(child.temp_id);
            }
          }
        }
      });
      let flag = false; // 默认添加新的
      for (let i = 0; i < form.model.sku_prices.length; i++) {
        if (form.model.sku_prices[i].goods_sku_temp_ids.join(',') == tempDetailIds.join(',')) {
          flag = i;
          break;
        }
      }
  
      if (flag === false) {
        form.model.sku_prices.push({
          id: 0,
          temp_id: form.model.sku_prices.length + 1,
          goods_sku_ids: '0',
          goods_id: 0,
          weigh: 0,
          image: '0',
          stock: 0,
          stock_warning: '',
          stock_warning_switch: '',
          price: 0,
          sn: '',
          weight: 0,
          status: 'up',
          goods_sku_text: tempDetail,
          goods_sku_temp_ids: tempDetailIds,
          original_price:'0',
          cost_price:'0',

        });
      } else {
        form.model.sku_prices[flag].goods_sku_text = tempDetail;
        form.model.sku_prices[flag].goods_sku_temp_ids = tempDetailIds;
      }
      return;
    }
    if (arr.length) {
      for (let i = 0; i < arr[k].length; i++) {
        temp[k] = arr[k][i];
        recursionSku(arr, k + 1, temp);
      }
    }
  }
  
  //获取库存预警
  function changeStockWarningSwitch(e) {
    form.model.sku_prices[e].stock_warning = form.model.sku_prices[e].stock_warning_switch ? 0 : null;
  }
  
  //获取配送方式
  const dispatchCheck = ref(true);
  const dispatch = reactive({
    select: [],
  });
  async function getDispatchSelect() {
    ({ data: dispatch.select } = await dispatchApi.select({
      type: form.model.dispatch_type
    }));
    // dispatch.select.unshift({
    //   id:1839611,
    //   name:'1688发货模板',
    //   status:'normal',
    //   status_text:'正常',
    //   type:'express'
    // })
    form.model.dispatch_id = 57
  }
  function onAddDispatch(dispatch_type) {
    // useModal(
    //   DispatchEdit,
    //   { title: '新建', type: 'add', dispatchType: dispatch_type },
    //   {
    //     confirm: () => {
    //       getDispatchSelect();
    //     },
    //   },
    // );
  }
  function onChangeDispatchType(val) {
    form.model.dispatch_id = val == 'custom' ? 0 : ''
    getDispatchSelect()
  }
  
  // 获取服务保障
  const service = reactive({
    select: [],
  });
  async function getServiceSelect() {
    ({ data: service.select } = await api.service.select());
  }
  
  // 获取标签列表
  const tags = reactive({
    select: [],
  });
  async function getTagsSelect() {
    ({ data: tags.select } = await api.tags.select());
  }
  function createService() {
    // useModal(
    //   ServiceEdit,
    //   { title: '新建', type: 'add' },
    //   {
    //     confirm: () => {
    //       getServiceSelect();
    //     },
    //   },
    // );
  }
  function createTags() {
    // useModal(
    //   tagsEdit,
    //   { title: '新建', type: 'add' },
    //   {
    //     confirm: () => {
    //       getTagsSelect();
    //     },
    //   },
    // );
  }
  
  const allEditDatas = ref('');
  const allstock_warning_switch = ref(false);
  const stock_warning_switch = ref(false);
  const allEditPopover = reactive({
    price: false,
    original_price: false,
    cost_price: false,
    stock: false,
    stock_warning: false,
    weight: false,
    sn: false,
  });
  const templateRules = {
    title: [{ required: true, message: '请输入名称', trigger: 'blur' }],
    content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
  };
  function addTemplate() {
    form.model.params.push({
      title: '',
      content: '',
    });
  }
  function deleteTemplate(index) {
    form.model.params.splice(index, 1);
  }
  
  //批量操作
  //保存
  function allEditData(type, opt) {
    switch (opt) {
      case 'define':
        form.model.sku_prices.forEach((i) => {
          if (type == 'stock_warning') {
            if (allstock_warning_switch.value) {
              i.stock_warning_switch.value = true;
              if (allEditDatas.value) {
                i[type] = allEditDatas.value;
              } else {
                i[type] = 0;
              }
            } else {
              i.stock_warning_switch.value = false;
              if (i.stock_warning_switch.value) {
                i[type] = allEditDatas.value;
              } else {
                i[type] = null;
              }
            }
          } else {
            i[type] = allEditDatas.value;
          }
        });
        allEditDatas.value = '';
        allEditPopover[type] = false;
        allstock_warning_switch.value = false;
        break;
      case 'cancel':
        allEditDatas.value = '';
        allEditPopover[type] = false;
        allstock_warning_switch.value = false;
        break;
    }
  }
  
  function onChangeGoodsType(type) {
    form.model.type = type;
    form.model.dispatch_type = type == 'normal' ? 'express' : 'autosend';
    form.model.dispatch_id = ''
    getDispatchSelect()
  }
  
    function onSuccess(data) {
      form.model.image_wh = {
        w: data.image_width,
        h: data.image_height,
      };
    }
  
  // 表单关闭时提交
  const confirm = async()=>{
    isValidate()
    setTimeout(async () => {
       if (validateData.value[0] == 0 && validateData.value[1] == 0 && validateData.value[2] == 0)  {
        btnloading.value = true
        let submitForm = cloneDeep(form.model);
  
        // 处理category_ids
        let idsArr = [];
        for (var key in tempCategory.idsArr) {
          idsArr.push(...tempCategory.idsArr[key]);
        }
        submitForm.category_ids = idsArr.join(',');
  
        // if (submitForm.is_sku == 1) {
        //   delete submitForm.stock;
        //   delete submitForm.cost_price;
        //   delete submitForm.original_price;
        //   delete submitForm.price;
        //   delete submitForm.stock_warning;
        //   delete submitForm.sn;
        //   delete submitForm.weight;
        // }
  
        // if (props.modal.params.type == 'copy') {
        //   delete submitForm.id;
        // }
        
        // 虚拟商品is_offline=0
        // if (submitForm.type == 'virtual') {
        //   submitForm.is_offline = 0
        // }
        submitForm.type = 'normal'
        submitForm.image = form.model.image.images[0]
        submitForm.images = form.model.image.images
        submitForm.supplier = '1688'
        submitForm.supplier_goods_id = form.model.productID
        submitForm.supplier_id = 1
        submitForm.show_sales = 0
        submitForm.service_ids = '1,2,3'
        submitForm.dispatch_type = 'express'
        submitForm.sales_show_type = 'exact'
        submitForm.stock_show_type = 'exact'
        // submitForm.dispatch_id = form.model.shippingInfo.freightTemplateID
        submitForm.is_offline = 0
        submitForm.weigh = 0
        submitForm.father_goods_id = form.model.productID
        // submitForm.is_sku = 1
        // submitForm.original_price = form.model.original_price
        // submitForm.original_price = form.model.cost_price
        submitForm.content = form.model.description
        submitForm.is_selected  = 1
        submitForm.limit_type  = 'none'
        submitForm.from  = '1688'
        submitForm.limit_num  = 0
        submitForm.source_type  = 'mall'
        submitForm.title  = form.model.subject
        if(!submitForm.params){
          submitForm.params = []
          if(form.model.attributes.length){
            form.model.attributes.forEach(item=>[
              submitForm.params.push({
                  title:item.attributeName,
                  content:item.value
              })
          ])
          }
          
        }
        
        if(!submitForm.skuInfos){
          submitForm.skuInfos = []
        }
        
        if(submitForm?.params?.length > 5){
          submitForm.params = submitForm.params.slice(0, 5)
        }
        // console.log('submitForm',JSON.stringify(submitForm))
        const { data, error } = await api.shopaddgoods_edit(submitForm)
        btnloading.value = false
        if(error === 0){
          ElMessage.success('操作成功')
        }
        emit('modalCallBack', {
            event: 'confirm',
          });
      }
    }, 500)
  }
//   function confirm() {
//     isValidate()
//     setTimeout(async () => {
//       if (validateData.value[0] == 0 && validateData.value[1] == 0 && validateData.value[2] == 0) {
//         let submitForm = cloneDeep(form.model);
  
//         // 处理category_ids
//         let idsArr = [];
//         for (var key in tempCategory.idsArr) {
//           idsArr.push(...tempCategory.idsArr[key]);
//         }
//         submitForm.category_ids = idsArr.join(',');
  
//         if (submitForm.is_sku == 1) {
//           delete submitForm.stock;
//           delete submitForm.cost_price;
//           delete submitForm.original_price;
//           delete submitForm.price;
//           delete submitForm.stock_warning;
//           delete submitForm.sn;
//           delete submitForm.weight;
//         }
  
//         if (props.modal.params.type == 'copy') {
//           delete submitForm.id;
//         }
  
//         // 虚拟商品is_offline=0
//         if (submitForm.type == 'virtual') {
//           submitForm.is_offline = 0
//         }
  
//         const { error } =
//           props.modal.params.type == 'add' || props.modal.params.type == 'copy'
//             ? await api.goods.add(submitForm)
//             : await api.goods.edit(props.modal.params.id, submitForm);
//         if (error == 0) {
//           emit('modalCallBack', {
//             event: 'confirm',
//           });
//         }
//       }
//     }, 500)
//   }
  async function init() {
    await getServiceSelect();
    await getTagsSelect();
    await getCategorySelect();
    if (props.modal.params.type == 'edit' || props.modal.params.type == 'copy') {
      await getDetail(props.modal.params.id);
    } else {
      getInit();
    }
    getDispatchSelect();
  }
  const pricetemp = reactive({
    select:[]
  })
  async function getPriceTemp(){
    const {data, error} = await api.getPriceTemp()
    pricetemp.select = data
  }



  // 多规格售价
  function skuprice(arr,item){
    if(arr.sale_price_float === 1){
      if(arr.sale_price_type === 2){
        item.price = Number(item.cost_price) + (Number(item.cost_price) / 100 * Number(arr.sale_price_num))
      }else{
        item.price = Number(item.cost_price) + Number(arr.sale_price_num)
      }
    }else if(arr.sale_price_float === 3){
      if(arr.sale_price_type === 2){
        item.price = Number(item.cost_price) - (Number(item.cost_price) / 100 * Number(arr.sale_price_num))
      }else{
        item.price = Number(item.cost_price) - Number(arr.sale_price_num)
      }
    }else{
      item.price = item.cost_price
    }
    item.price = round(item.price,2)
    return item
  }
  // 多规格划线价
  function skuoriginal_price(arr,item){
    if(arr.market_price_float === 1){
      if(arr.market_price_type === 2){
        item.original_price = Number(item.cost_price) + (Number(item.cost_price) / 100 * Number(arr.market_price_num))
      }else{
        item.original_price = Number(item.cost_price) + Number(arr.market_price_num)
      }
    }else if(arr.market_price_float === 3){
      if(arr.market_price_type === 2){
        item.original_price = Number(item.cost_price) - (Number(item.cost_price) / 100 * Number(arr.market_price_num))
      }else{
        item.original_price = Number(item.cost_price) - Number(arr.market_price_num)
      }
    }else{
      item.original_price = item.cost_price
    }
    item.original_price = round(item.original_price,2)
    return item
  }
  // 多规格商家采购价
  function skubuy_price(arr,item){
    if(arr.buy_price_float === 1){
      if(arr.buy_price_type === 2){
        item.buy_price = Number(item.cost_price) + (Number(item.cost_price) / 100 * Number(arr.buy_price_num))
      }else{
        item.buy_price = Number(item.cost_price) + Number(arr.buy_price_num)
      }
    }else if(arr.buy_price_float === 3){
      if(arr.buy_price_type === 2){
        item.buy_price = Number(item.cost_price) - (Number(item.cost_price) / 100 * Number(arr.buy_price_num))
      }else{
        item.buy_price = Number(item.cost_price) - Number(arr.buy_price_num)
      }
    }else{
      item.buy_price = item.cost_price
    }
    item.buy_price = round(item.buy_price,2)
    return item
  }


  function tempchange(id){
  console.log(id)
  console.log(pricetemp.select)
  const arr = pricetemp.select.find(item => item.id === id)
  if(!arr){return}
  // form.model.price   售卖价格处理
  if(arr.sale_price_float === 1){
    if(arr.sale_price_type === 2){
      form.model.price = Number(form.model.cost_price) + (Number(form.model.cost_price) / 100 * Number(arr.sale_price_num))
    }else{
      form.model.price = Number(form.model.cost_price) + Number(arr.sale_price_num)
    }
  }else if(arr.sale_price_float === 3){
    if(arr.sale_price_type === 2){
      form.model.price = Number(form.model.cost_price) - (Number(form.model.cost_price) / 100 * Number(arr.sale_price_num))
    }else{
      form.model.price = Number(form.model.cost_price) - Number(arr.sale_price_num)
    }
  }else{
    form.model.price = form.model.cost_price
  }
  form.model.price = round(form.model.price,2)
  if(form.model?.sku_prices?.length){
    form.model.sku_prices.forEach(item=>{
      item = skuprice(arr,item)
    })
  }
  // form.model.original_price   划线价格处理
  if(arr.market_price_float === 1){
    if(arr.market_price_type === 2){
      form.model.original_price = Number(form.model.cost_price) + (Number(form.model.cost_price) / 100 * Number(arr.market_price_num))
    }else{
      form.model.original_price = Number(form.model.cost_price) + Number(arr.market_price_num)
    }
  }else if(arr.market_price_float === 3){
    if(arr.market_price_type === 2){
      form.model.original_price = Number(form.model.cost_price) - (Number(form.model.cost_price) / 100 * Number(arr.market_price_num))
    }else{
      form.model.original_price = Number(form.model.cost_price) - Number(arr.market_price_num)
    }
  }else{
    form.model.original_price = form.model.cost_price
  }
  form.model.original_price = round(form.model.original_price,2)
  if(form.model?.sku_prices?.length){
    form.model.sku_prices.forEach(item=>{
      item = skuoriginal_price(arr,item)
    })
  }
  // form.model.buy_price   商家采购价格处理
  if(arr.buy_price_float === 1){
    if(arr.buy_price_type === 2){
      form.model.buy_price = Number(form.model.cost_price) + (Number(form.model.cost_price) / 100 * Number(arr.buy_price_num))
    }else{
      form.model.buy_price = Number(form.model.cost_price) + Number(arr.buy_price_num)
    }
  }else if(arr.buy_price_float === 3){
    if(arr.buy_price_type === 2){
      form.model.buy_price = Number(form.model.cost_price) - (Number(form.model.cost_price) / 100 * Number(arr.buy_price_num))
      console.log('Number(form.model.cost_price) / 100 * Number(arr.buy_price_num)',Number(form.model.cost_price) / 100 * Number(arr.buy_price_num))
    }else{
      form.model.buy_price = Number(form.model.cost_price) - Number(arr.buy_price_num)
    }
  }else{
    form.model.buy_price = form.model.cost_price
  }
  form.model.buy_price = round(form.model.buy_price,2)
  if(form.model?.sku_prices?.length){
    form.model.sku_prices.forEach(item=>{
      item = skubuy_price(arr,item)
    })
  }
}
  onMounted(() => {
    init();
    updateStyle();
    getPriceTemp();
  });
  </script>
  <style lang="scss" scoped>
  
  .goods-edit{
    .el-header{
      --el-header-height:fit-content;
    }
    .goods-type {
      width: 140px;
      height: 56px;
      border: 1px solid rgb(230, 230, 230);
      border-radius: 4px;
      margin-left: 16px;
      cursor: pointer;
      &.is-active {
        border: 1px solid var(--el-color-primary);
      }
    }
    .is-error {
      color: #FF4D4F;
    }
  } 
  .goods-edit {
    .oper {
      :deep() {
        .el-form-item__content {
          height: 32px;
        }
      }
    }
  }
  .header {
    width: 100%;
    height: 40px;
    color: #434343;
    padding-left: 16px;
    background: var(--sa-table-striped);
    margin: 24px 0 16px 0;
    font-weight: 500;
    font-size: 14px;
  }
  //商品形式
  .goodstype {
    width: 140px;
    height: 56px;
    border-radius: 4px;
    position: relative;
  }
  .badge {
    color: var(--el-color-primary);
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 50%;
    font-weight: 600;
    font-size: 14px;
    position: absolute;
    top: -8px;
    right: -8px;
  }
  //提示文本
  .warning-title {
    color: #faad14;
    font-size: 12px;
    line-height: 16px;
    margin-left: 16px;
  }
  .add-category {
    color: var(--el-color-primary);
    font-size: 14px;
    line-height: 16px;
  }
  
  //警告图标
  .icon-warning {
    width: 14px;
    height: 14px;
    display: flex;
    margin-left: 8px;
  }
  //精确图片
  .sales-hover-img {
    width: 220px;
    height: 98px;
    display: flex;
  }
  .stock-hover-img {
    width: 220px;
    height: 74px;
    display: flex;
  }
  //批量操作
  .batch {
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--sa-border);
    border-top: none;
    font-size: 12px;
    color: var(--sa-subtitle);
    .batch-title {
      margin-left: 12px;
      color: var(--el-color-primary);
      cursor: pointer;
    }
    .batch-cancle {
      margin-left: 8px;
      color: var(--sa-subfont);
    }
  }
  
  :deep() {
    //步骤条
    .el-step__head {
      display: none;
    }
    .el-step.is-simple:not(:last-of-type) .el-step__title {
      max-width: 100%;
    }
    .el-step__title.is-process {
      font-weight: 500;
      color: var(--el-color-primary);
    }
    .el-step__title.is-wait {
      font-weight: 500;
      color: var(--sa-font);
    }
    .el-step.is-simple .el-step__arrow::before {
      transform: rotate(-45deg) translateY(-3px);
      height: 9px;
    }
    .el-step.is-simple .el-step__arrow::after {
      transform: rotate(45deg) translateY(3px);
      height: 9px;
    }
    .el-steps--simple {
      background: var(--sa-table-header-bg);
    }
    .server {
      .el-form-item__content {
        width: 100%;
      }
      .el-button {
        border-radius: 0 4px 4px 0;
        background: var(--sa-table-header-bg);
      }
  
      .el-select__tags {
        padding-left: 12px;
        .el-tag {
          background: var(--sa-table-header-bg);
        }
      }
    }
  }
  img {
    width: 100%;
    height: 100%;
  }
  .success {
    color: red;
  }
  
  .sku-wrap {
    width: 100%;
    border: 1px solid #d9d9d9;
    padding: 8px;
    box-sizing: border-box;
    .sku {
      width: 100%;
      min-height: 100px;
      .sku-key {
        width: 100%;
        height: 40px;
        color: var(--sa-subtitle);
        padding: 0 16px;
        background: var(--sa-table-header-bg);
        font-size: 14px;
        .sku-key-input {
          width: 120px;
        }
        .sku-key-icon {
          color: var(--el-color-primary);
        }
      }
      .sku-value {
        padding: 12px 0 0 30px;
        font-size: 14px;
        color: var(--sa-subtitle);
        .sku-value-title {
          height: 32px;
        }
        .sku-value-box {
          position: relative;
          margin-right: 24px;
          .sku-value-input {
            width: 104px;
          }
          .sku-value-icon {
            position: absolute;
            right: -8px;
            top: -8px;
            width: 16px;
            height: 16px;
            color: var(--el-color-primary);
          }
        }
        .sku-value-add {
          width: 104px;
          height: 32px;
          font-size: 14px;
          color: var(--el-color-primary);
        }
      }
    }
    .sku-tools {
      width: 100%;
      height: 40px;
      color: #434343;
      padding-left: 16px;
      background: var(--sa-table-header-bg);
      font-size: 12px;
      .add {
      }
    }
  }
  .alledit-input {
    margin-bottom: 10px;
  }
  
  .sku-table-wrap {
    width: 100%;
    overflow: auto;
    margin-top: 16px;
    .sku-table {
      width: 100%;
      border: 1px solid var(--sa-border);
      tbody {
        font-size: 12px;
      }
      th {
        font-size: 12px;
        color: var(--subtitle);
        height: 32px;
        line-height: 1;
        padding-left: 12px;
        box-sizing: border-box;
        text-align: left;
        .sku-table-header-title {
          margin-right: 10px;
        }
        .th-title {
          font-size: 12px;
          color: var(--subtitle);
          font-weight: bold;
        }
      }
      td {
        min-width: 88px;
        padding: 0 10px;
        height: 40px;
        box-sizing: border-box;
        &.image {
          min-width: 48px;
        }
        &.stock {
          min-width: 138px;
        }
        &.stock_warning {
          min-width: 168px;
          .sku-stock-switch {
            margin-right: 10px;
          }
        }
        &.sn {
          min-width: 116px;
        }
      }
    }
  }
  .batch-icon {
    width: 12px;
    height: 12px;
    margin-left: 10px;
    color: var(--el-color-primary);
  }
  </style>
  <style lang="scss">
  .popper-category {
    // width: 350px;
    padding: 10px !important;
    .el-cascader-panel {
      overflow: auto;
    }
    .el-tooltip__trigger {
      position: relative;
      max-width: 360px;
      width: 100%;
    }
  }
  .category-content {
    position: relative;
    max-width: 360px;
    width: 100%;
    .category-tag {
      position: absolute;
      z-index: 10;
      left: 0;
      right: 76px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-wrap: wrap;
      line-height: normal;
      text-align: left;
      box-sizing: border-box;
      .el-tag {
        margin: 2px 0 2px 6px;
      }
    }
  }
  
  .category-tag-wrap {
    flex: 1;
    min-height: 32px;
    padding-right: 12px;
    border-radius: 4px;
    border: 1px solid var(--sa-border);
    cursor: pointer;
    position: relative;
  }
  
  .category-tag-wrap .el-tag {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    margin: 2px 0 2px 6px;
    text-overflow: ellipsis;
  }
  
  .category-tag-wrap-suffix {
    width: 12px;
    height: 100%;
    position: absolute;
    right: 6px;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .category-tag-wrap-suffix .circle-close {
    display: none;
  }
  
  .category-tag-wrap-suffix.is-active:hover .circle-close {
    display: block;
  }
  
  .category-tag-wrap-suffix.is-active:hover .arrow-down {
    display: none;
  }
  </style>
  